<template>
  <div class="add-dialog-main">
    <el-form :model="props.formData" ref="ruleFormRef" @submit.native.prevent="" @keydown.enter="handleSubmitAdd">
      <el-form-item v-if="props.dialogTitile === '重命名'">
        <el-input v-model="props.formData.fileName"></el-input>
      </el-form-item>
      <el-form-item v-else>
        <el-input v-model="props.formData.newFileName" placeholder="请输入新建文件名"></el-input>
      </el-form-item>
    </el-form>
    <div class="dialog-footer">
      <el-button @click="handleClose">取消</el-button>
      <el-button color="#6C52EA" @click="handleSubmitAdd"> 确定 </el-button>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

const props = defineProps({
  formData: {
    type: Object,
    default: () => {}
  },
  dialogTitile: {
    type: String,
    default: null
  }
})

const emit = defineEmits(['send-close-dialog', 'send-submit-dialog'])
const ruleFormRef = ref()

/**
 * @desc: 取消提交
 */
const handleClose = () => {
  emit('send-close-dialog')
}

/**
 * @desc: 保存提交
 */
const handleSubmitAdd = () => {
  ruleFormRef.value.validate((valid: boolean) => {
    if (valid) {
      emit('send-submit-dialog')
      ruleFormRef.value.resetFields()
    }
  })
}
</script>

<style lang="less" scoped>
.add-dialog-main {
  .dialog-footer {
    display: flex;
    justify-content: flex-end;
    padding-top: 10px;
  }
}
</style>
